import Vue from 'vue'
import Vuex from 'vuex'
import cartStore  from './module/cartStore'
// 导入vuex 持久化插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)
// 如何理解vuex： 是vue的公共状态管理 他有五个属性
// state 设计的公共状态 
// mutations 同步修改state数据 触发commit()
// actions 异步修改state数据 触发方法是dispatch()
// getter 是vuex的计算属性
// modules 是vuex分模块开发
// vuex还提供辅助函数法使用  
// mapState和mapGetters是将 state和getters的数据注入组件的computed 
// mapMutations和mapActions 是将vuex的方法 注入到vue组件的methods使用
// 应用场景： 存储token管理，购物车，组件传值

//vuex 刷新 页面数据会重新初始化，如何解决
// 1手动配置localStorge进行存储
// 2.安装vuex 持久化插件
// npm i vuex-persistedstate
// vuex-persistedstate 持久化插件原理 也是 结合localStorage

// 使用state数据 this.$store.state.属性
// 触发mutations this.$store.commit("方法名",参数)
// 触发actions   this.$store.dispatch("方法名",参数)
// getters    this.$store.getters.属性


export default new Vuex.Store({
  state: { //state是 管理的公共状态
    count:1,
    token:"111000"
  },
  mutations: { //直接修改state的方法  组件中用this.$store.commit("函数名",传参)触发
    // state 第一个形参是state 
    setCount(state,num){
      state.count= state.count+num;

    }
  },
  actions: { //间接修改state的数据方法，是异步操作
    countAct({commit},num){ //在组件中触发actions的方法 actions第一个形参 是解构出来的commit方法
      // this.$store.dispatch("方法名",参数) 
      commit("setCount",num)
    }
  },
  getters:{ //vuex的计算属性是 对state数据进行计算属性
    // vuex的getters 基于依赖缓存 state数据变化 才会从新计算
    count:state=>state.count,
    douBleCount(state){
      return  state.count*2
    },
    ccCount(state){
       return  state.count*5
    }
  },
  modules: { //vuex的模块化管理
    cartStore:cartStore
  },
  // 持久化插件的配置 
  plugins:[createPersistedState()]
})
